<template>
  <div class="drafts-page">
    <div class="page-header">
      <h2>我的草稿</h2>
      <el-button type="primary" @click="importFromWriting">
        <el-icon><Plus /></el-icon>
        从写作页面导入
      </el-button>
    </div>

    <div class="drafts-grid" v-if="writingStore.drafts.length > 0">
      <el-card 
        v-for="draft in writingStore.drafts" 
        :key="draft.id"
        class="draft-card"
        shadow="hover"
      >
        <div class="draft-header">
          <h3 class="draft-title">{{ draft.title }}</h3>
          <el-tag :type="getModeColor(draft.mode)" size="small">
            {{ getModeName(draft.mode) }}
          </el-tag>
        </div>
        
        <div class="draft-content">
          <p class="draft-excerpt">{{ getExcerpt(draft.content) }}</p>
          <div class="draft-meta">
            <span class="draft-date">创建时间：{{ formatDate(draft.createdAt) }}</span>
            <span class="draft-length">字数：{{ draft.content.length }}</span>
          </div>
        </div>
        
        <div class="draft-actions">
          <el-button size="small" @click="continueDraft(draft)" type="primary">
            <el-icon><Edit /></el-icon>
            继续编辑
          </el-button>
          <el-button size="small" @click="viewDraft(draft)">
            <el-icon><View /></el-icon>
            查看
          </el-button>
          <el-button size="small" @click="exportDraft(draft)">
            <el-icon><Download /></el-icon>
            导出
          </el-button>
          <el-button size="small" @click="deleteDraft(draft.id)" type="danger">
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </div>
      </el-card>
    </div>

    <div v-else class="empty-state">
      <el-empty description="还没有保存任何草稿">
        <el-button type="primary" @click="$router.push('/writing')">
          开始写作
        </el-button>
      </el-empty>
    </div>

    <!-- 查看草稿对话框 -->
    <el-dialog v-model="showViewDialog" :title="selectedDraft?.title" width="800px">
      <div class="draft-detail" v-if="selectedDraft">
        <div class="detail-meta">
          <el-tag :type="getModeColor(selectedDraft.mode)" size="small">
            {{ getModeName(selectedDraft.mode) }}
          </el-tag>
          <span class="detail-date">{{ formatDate(selectedDraft.createdAt) }}</span>
          <span class="detail-length">字数：{{ selectedDraft.content.length }}</span>
        </div>
        <div class="detail-content">
          {{ selectedDraft.content }}
        </div>
        <div class="detail-actions">
          <el-button @click="continueDraft(selectedDraft)" type="primary">
            继续编辑
          </el-button>
          <el-button @click="exportDraft(selectedDraft)">
            导出文档
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useWritingStore } from '@/stores/writing'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const writingStore = useWritingStore()

const showViewDialog = ref(false)
const selectedDraft = ref(null)

const getModeName = (mode) => {
  const names = {
    biography: '传记',
    diary: '日记',
    memoir: '回忆录'
  }
  return names[mode] || mode
}

const getModeColor = (mode) => {
  const colors = {
    biography: 'primary',
    diary: 'success',
    memoir: 'warning'
  }
  return colors[mode] || ''
}

const getExcerpt = (content) => {
  return content.length > 200 ? content.substring(0, 200) + '...' : content
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

const importFromWriting = () => {
  if (writingStore.content.trim()) {
    writingStore.saveDraft()
    ElMessage.success('当前写作内容已保存为草稿')
  } else {
    router.push('/writing')
  }
}

const continueDraft = (draft) => {
  writingStore.setMode(draft.mode)
  writingStore.updateContent(draft.content)
  router.push('/writing')
  ElMessage.success('草稿已加载到写作页面')
}

const viewDraft = (draft) => {
  selectedDraft.value = draft
  showViewDialog.value = true
}

const exportDraft = (draft) => {
  const blob = new Blob([draft.content], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `${draft.title}.txt`
  a.click()
  URL.revokeObjectURL(url)
  ElMessage.success('草稿导出成功')
}

const deleteDraft = async (draftId) => {
  try {
    await ElMessageBox.confirm('确定要删除这个草稿吗？', '确认删除', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const index = writingStore.drafts.findIndex(d => d.id === draftId)
    if (index > -1) {
      writingStore.drafts.splice(index, 1)
      ElMessage.success('草稿删除成功')
    }
  } catch {
    // 用户取消删除
  }
}
</script>

<style scoped>
.drafts-page {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.drafts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.draft-card {
  height: fit-content;
}

.draft-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.draft-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  flex: 1;
  margin-right: 10px;
}

.draft-content {
  margin-bottom: 15px;
}

.draft-excerpt {
  color: #666;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.draft-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.draft-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
}

.draft-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-meta {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.detail-content {
  margin-bottom: 20px;
  line-height: 1.8;
  color: #333;
  white-space: pre-wrap;
}

.detail-actions {
  display: flex;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}
</style>
